/*
			 * 传入参数   
			 * */
			function DrawBg(elem){
				this.elem = elem;
				this.init();
			}
			
			DrawBg.prototype = {
				constructor:DrawBg,
				init:function(){
					this.draw();
				},
				changeAnimate:function(){
					var animate = ["left","right","top","bottom","scale_small","scale_big"];
					var idx = parseInt(Math.random()*6);
					return animate[idx];
				},
				bindDom:function(){
					var bg_image = document.createElement("div");
					bg_image.setAttribute("id","bg_image");
					document.body.appendChild(bg_image);
					document.getElementById("bg_image");
					var allInnerHtml = "";
					var _this = this;
					this.elem.imgData.forEach(function(str,idx,arr){
						var img = document.createElement("img");
						img.setAttribute("src",str);
						img.classList.add("animated");
						img.classList.add("infinite");
						if(idx == _this.elem.currentIdx){
							img.classList.add("active");
							if(_this.elem.animate){
								img.classList.add(_this.elem.animate);
							}else{
								img.classList.add(_this.changeAnimate());
							}
						}
						document.getElementById("bg_image").appendChild(img);
					})
					var modal = document.createElement("div");
					modal.classList.add("modal");
					document.getElementById("bg_image").appendChild(modal);
					this.check_page();
				},
				draw:function(){
					this.draw_css();
					this.bindDom(); // 渲染Dom
				},
				draw_css:function(){
					var time = this.elem.animate_time ? this.elem.animate_time : 10;
					var modal_color = this.elem.modal_color ? this.elem.modal_color : "#000";
					var opacity = this.elem.opacity ? this.elem.opacity : 0.2;
					this.css = 
						"#bg_image{position:absolute;width: 100%;height: 100%;left:0;top:0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;overflow: hidden;z-index:0;}"+
						"#bg_image img{position: absolute;left:-50%;top:-50%;min-height: 200%;opacity: 0;-webkit-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;}"+
						"#bg_image img.active{opacity: 1;}"+
						".animated{-webkit-animation-duration: "+ time +"s;animation-duration: "+time +"s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}"+
						".animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}"+
						".left{-webkit-animation-name: check_left;animation-name: check_left;}"+
						"@-webkit-keyframes check_left{0%{-webkit-transform:translateX(-0%);transform:translateX(-0%)	}100%{-webkit-transform:translateX(-15%);transform:translateX(-15%)}}"+
						"@keyframes check_left{0%{-webkit-transform:translateX(-0%);transform:translateX(-0%)	}100%{-webkit-transform:translateX(-15%);transform:translateX(-15%)}}"+
						".right{-webkit-animation-name: check_right;animation-name: check_right;}"+
						"@-webkit-keyframes check_right{0%{-webkit-transform:translateX(-0%);transform:translateX(-0%)}100%{-webkit-transform:translateX(15%);transform:translateX(15%)}}"+
						"@keyframes check_right{0%{-webkit-transform:translateX(-0%);transform:translateX(-0%)}100%{-webkit-transform:translateX(15%);transform:translateX(15%)}}"+
						".top{-webkit-animation-name:check_top;animation-name:check_top}"+
						"@-webkit-keyframes check_top{0%{-webkit-transform:translateY(-0%);transform:translateY(-0%)}100%{-webkit-transform:translateY(15%);transform:translateY(15%)}}"+
						"@keyframes check_top{0%{-webkit-transform:translateY(-0%);transform:translateY(-0%)}100%{-webkit-transform:translateY(15%);transform:translateY(15%)}}"+
						".bottom{-webkit-animation-name:check_bottom;animation-name:check_bottom}"+
						"@-webkit-keyframes check_bottom{0%{-webkit-transform:translateY(0%);transform:translateY(0%)}100%{-webkit-transform:translateY(-15%);transform:translateY(-15%)}}"+
						"@keyframes check_bottom{0%{-webkit-transform:translateY(0%);transform:translateY(0%)}100%{-webkit-transform:translateY(-15%);transform:translateY(-15%)}}"+
						".scale_small{-webkit-animation-name:check_scale_small;animation-name:check_scale_small}"+
						"@-webkit-keyframes check_scale_small{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0.8);transform:scale(0.8)}}"+
						"@keyframes check_scale_small{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0.8);transform:scale(0.8)}}"+
						".scale_big{-webkit-animation-name:check_scale_big;animation-name:check_scale_big}"+
						"@-webkit-keyframes check_scale_big{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}"+
						"@keyframes check_scale_big{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}"+
						".modal{position:absolute;width:100%;height:100%;left:0;top:0;background-color:"+modal_color+";opacity:"+opacity+";}"
				    var style   = document.createElement('style');
				    style.type  = 'text/css';
				    if (style.styleSheet) {
				      style.styleSheet.cssText = this.css;
				    } else {
				      style.appendChild(document.createTextNode(this.css));
				    }
				    return document.head.appendChild(style);
				},
				check_page:function(){
					var _this = this;
					var len = this.elem.imgData.length;
					//console.log(this.elem.currentIdx);
					if(!this.elem.check_time){
						this.elem.check_time = 8
					}
					setTimeout(function(){
						var imgall = document.getElementById("bg_image").querySelectorAll("img");
						var t = _this.elem.currentIdx+1;
						if(t>imgall.length-1){
							imgall[0].classList.add("active")
							imgall[0].classList.add(_this.changeAnimate())
							setTimeout(function(){
								imgall[t-1].className = "animated infinite";
							},2000)
							_this.elem.currentIdx = 0;
						}else {
							
							imgall[t].classList.add("active")
							imgall[t].classList.add(_this.changeAnimate())
							setTimeout(function(){
								imgall[t-1].className = "animated infinite";
							},2000)
							++_this.elem.currentIdx;
						}
						_this.check_page();
					},this.elem.check_time*1000)
				},
			}
			
			// --------------demo start------------------
//			var DrawBg = new DrawBg({
//				imgData:['../../images/common/720x1242.png','../../images/main_bg.png','../../images/common/720x1242.png','../../images/main_bg.png','../../images/common/720x1242.png'],
//				currentIdx:0, //当前所在页面
//				check_time:8, //页面切换时间
//				animate_time:10, //动画运行时间
//				animate:"", //当前起始页面的动画效果，参数有["left","right","top","bottom","scale_small"，"scale_big"]
//				modal_color:"#000", //蒙层颜色 规则为 rgb(0,0,0) || #000; 默认为000
//				opacity:0.2, //透明度 0-1 默认为0.2
//			});
			//--------------end------------------